---
title: Mathematics
description: Render beautiful LaTeX equations with KaTeX support in Streamdown.
---

Streamdown provides built-in support for rendering mathematical expressions using LaTeX syntax, powered by [KaTeX](https://katex.org/). Write complex equations and formulas that render beautifully alongside your content.

## Syntax

Streamdown uses double dollar signs (`$$`) to delimit mathematical expressions. Unlike traditional LaTeX, single dollar signs (`$`) are **not** used to avoid conflicts with currency symbols in regular text.

### Inline Math

Wrap inline mathematical expressions with `$$`:

```markdown
The quadratic formula is $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ for solving equations.
```

Renders as: The quadratic formula is $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ for solving equations.

### Block Math

For display-style equations, place `$$` delimiters on separate lines:

```markdown
$$
E = mc^2
$$
```

This renders the equation centered and larger:

$$
E = mc^2
$$

## Common Mathematical Expressions

### Fractions

```markdown
$$\frac{numerator}{denominator}$$
```

Example: $$\frac{1}{2}$$, $$\frac{a + b}{c - d}$$

### Square Roots

```markdown
$$\sqrt{x}$$ or $$\sqrt[n]{x}$$
```

Example: $$\sqrt{16} = 4$$, $$\sqrt[3]{27} = 3$$

### Exponents and Subscripts

```markdown
$$x^2$$ or $$x_i$$ or $$x_i^2$$
```

Example: $$a^2 + b^2 = c^2$$, $$x_1, x_2, \ldots, x_n$$

### Greek Letters

```markdown
$$\alpha, \beta, \gamma, \delta, \theta, \pi, \sigma, \omega$$
$$\Gamma, \Delta, \Theta, \Pi, \Sigma, \Omega$$
```

Common letters: $$\alpha, \beta, \gamma, \delta, \epsilon, \pi, \sigma, \phi, \omega$$

### Summations

```markdown
$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$
```

The sum of first $$n$$ natural numbers: $$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

### Integrals

```markdown
$$\int_{a}^{b} f(x) \, dx$$
```

Definite integral: $$\int_{0}^{1} x^2 \, dx = \frac{1}{3}$$

### Limits

```markdown
$$\lim_{x \to \infty} \frac{1}{x} = 0$$
```

Example: $$\lim_{x \to 0} \frac{\sin x}{x} = 1$$

### Matrices

```markdown
$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
$$
```

A 2×2 matrix:

$$
\begin{bmatrix}
1 & 2 \\
3 & 4
\end{bmatrix}
$$

## Advanced Examples

### The Quadratic Formula

```markdown
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
```

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

### Euler's Identity

```markdown
$$
e^{i\pi} + 1 = 0
$$
```

$$
e^{i\pi} + 1 = 0
$$

### Normal Distribution

```markdown
$$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}
$$
```

The probability density function:

$$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}
$$

### Taylor Series

```markdown
$$
e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots
$$
```

$$
e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots
$$

### Integration by Parts

```markdown
$$
\int u \, dv = uv - \int v \, du
$$
```

$$
\int u \, dv = uv - \int v \, du
$$

## Special Operators and Symbols

### Comparison Operators

```markdown
$$\leq$$ $$\geq$$ $$\neq$$ $$\approx$$ $$\equiv$$
```

$$x \leq y$$, $$a \geq b$$, $$x \neq 0$$, $$\pi \approx 3.14$$, $$a \equiv b \pmod{n}$$

### Set Notation

```markdown
$$\in$$ $$\notin$$ $$\subset$$ $$\subseteq$$ $$\cup$$ $$\cap$$ $$\emptyset$$
```

$$x \in A$$, $$y \notin B$$, $$A \subset B$$, $$A \cup B$$, $$A \cap B$$, $$\emptyset$$

### Logic Symbols

```markdown
$$\land$$ $$\lor$$ $$\neg$$ $$\implies$$ $$\iff$$ $$\forall$$ $$\exists$$
```

$$p \land q$$, $$p \lor q$$, $$\neg p$$, $$p \implies q$$, $$p \iff q$$, $$\forall x$$, $$\exists y$$

### Calculus Notation

```markdown
$$\frac{dy}{dx}$$ $$\frac{\partial f}{\partial x}$$ $$\nabla$$ $$\infty$$
```

Derivative: $$\frac{dy}{dx}$$, Partial: $$\frac{\partial f}{\partial x}$$, Gradient: $$\nabla f$$, Infinity: $$\infty$$

## Configuration

### Custom Error Color

Customize how errors are displayed:

```tsx
import { Streamdown } from 'streamdown';
import rehypeKatex from 'rehype-katex';

export default function Page() {
  return (
    <Streamdown
      rehypePlugins={[
        [rehypeKatex, { errorColor: '#dc2626' }]
      ]}
    >
      {markdown}
    </Streamdown>
  );
}
```

### Disable Math Support

If you don't need math support, you can exclude the plugins:

```tsx
import { Streamdown } from 'streamdown';

export default function Page() {
  return (
    <Streamdown
      remarkPlugins={[]} // Removes remark-math
      rehypePlugins={[]} // Removes rehype-katex
    >
      {markdown}
    </Streamdown>
  );
}
```

Note: This will remove all default plugins, so you'll need to add back any others you need.

## Streaming Considerations

### Incomplete Equations

Streamdown's unterminated block parser handles incomplete equations gracefully:

```markdown
$$
E = mc^
```

During streaming, the parser detects the incomplete block-level equation and adds the closing `$$` delimiter, ensuring proper rendering even before the equation is complete.

### Inline vs Block Detection

The parser distinguishes between inline and block math:

- **Inline**: $$E = mc^2$$ (same line)
- **Block**: Separate lines with newlines

```markdown
This is inline $$E = mc^2$$ math.

$$
E = mc^2
$$

This is block math.
```

## Accessibility

Mathematical expressions rendered by KaTeX include:

- **MathML** - Machine-readable math representation
- **Title Attributes** - LaTeX source in tooltips
- **Semantic HTML** - Proper structure for screen readers
- **Scalable Typography** - Math scales with text size settings

## Performance

KaTeX is chosen for its performance characteristics:

- **Fast Rendering** - 2-3x faster than MathJax
- **No JavaScript Runtime** - Pure CSS styling (after initial render)
- **Small Bundle** - Minimal impact on page load
- **Cached Parsing** - Streamdown memoizes rendered equations

## Common Issues

### Escaping Backslashes

In JavaScript/TypeScript strings, backslashes need to be escaped:

```tsx
// ❌ Wrong
const markdown = "$\frac{1}{2}$";

// ✅ Correct
const markdown = "$$\\frac{1}{2}$$";

// ✅ Or use template literals
const markdown = `$$\frac{1}{2}$$`;
```

### Currency vs Math

Streamdown uses `$$` for math to avoid conflicts with currency:

```markdown
This item costs $5 and that one costs $10. (These are currency symbols)

This equation $$x = 5$$ is mathematical notation. (This is math)
```

### Spacing in Equations

Use `\,` for thin space, `\:` for medium space, `\;` for thick space:

```markdown
$$\int f(x) \, dx$$
```

Better spacing: $$\int f(x) \, dx$$

## Resources

- [KaTeX Documentation](https://katex.org/docs/supported.html) - Complete list of supported functions
- [KaTeX Support Table](https://katex.org/docs/support_table.html) - Feature compatibility
- [LaTeX Math Symbols](https://www.overleaf.com/learn/latex/List_of_Greek_letters_and_math_symbols) - Symbol reference

## Best Practices

### Keep Equations Readable

Break complex equations into steps:

```markdown
Start with the equation:

$$
f(x) = ax^2 + bx + c
$$

Complete the square:

$$
f(x) = a\left(x + \frac{b}{2a}\right)^2 + c - \frac{b^2}{4a}
$$
```

### Add Context

Explain your equations:

```markdown
The Pythagorean theorem states that for a right triangle:

$$
a^2 + b^2 = c^2
$$

where $$a$$ and $$b$$ are the legs and $$c$$ is the hypotenuse.
```

### Use Block Math for Complex Expressions

Reserve inline math for simple expressions:

```markdown
✅ Good: The slope is $$m = \frac{y_2 - y_1}{x_2 - x_1}$$

❌ Avoid: $$\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}$$ in the middle of text

✅ Better:

$$
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
$$
```

## Related Features

- [Typography](/docs/typography) - Text styling that complements mathematical content
- [Unterminated Block Parsing](/docs/termination) - How streaming works with equations
- [GitHub Flavored Markdown](/docs/gfm) - Extended Markdown features
